var templageContnetJs = require('t_content/t_content.js');
var apiFun = require('../../utils/api.js');

var data ={
  "magicId": 4,
  "title": "好像听撩人的话",
  "createTime": "2018-07-05 17:05:17",
  "colorScheme": {
    "themeId": 2,
    "themeName": "黄色系",
    "isDelete": 1,
    "bgColor": "-webkit-linear-gradient(top, rgb(234,185,45) 0%,rgb(199,152,16) 100%)",
    "navBgColor": "#E5B900",
    "navFontColor": "#ffffff",
    "qBgColor": "#ffffff",
    "qAuthorColor": "#ffffff",
    "qContentFontColor": "black",
    "aBgColor": "#ffffff",
    "aAuthorColor": "#ffffff",
    "aContentFontColor": "black",
    "buttonFontColor": "black",
    "buttonBgColor": "rgba(255, 255, 255, 0.5)"
  }
};


Page({

  //init data
  data:{
    list: {},
    animationMagicTopic:{},
    animationIndex:0,
    isShowAnswerMagic:true,
    isLoading:false,
    isLoadingStart:false,
    isMagicDescribe:true,
    isMagicLoading:false,
    footerConfig:{
      isFooterMagic: true,
      isFooterZb: false
    },
  },

  //onLoad
  onLoad:function(event){

  },

  onBegin:function(event){

    var that = this;

    //set data
    this.setData({
      isLoadingStart: true
    })

    //request
    apiFun.getMagicList(
      {
        success: function (res) {

          if (res.list != false) {

            //设置第一个data的bar颜色
            var firstBgColor = res.list[0]['colorScheme']['navBgColor'];
            var firstFrontColor = res.list[0]['colorScheme']['navFontColor'];
            wx.setNavigationBarColor({
              frontColor: firstFrontColor,
              backgroundColor: firstBgColor,
              animation: {
                duration: 400,
                timingFunc: 'easeIn'
              }
            })

            //set data
            that.setData({
              list: res.list,
              page: res.page,
              isMagicDescribe: false,
              isLoadingStart:false
            })

          } else {
            //errorMessage = '出问题啦， 没有数据啦';
            //isReloadAction = true;
          }
        },
        fail: function (res) {
          that.setData({
            //isLoadAnimation: false,
            //isReloadAction: true,
            //errorMessage: '网络通信出错拉。。。'
          })
        },
        pageNumber: 1,
        userId: 2
      },
    )


  },

  //onShow
  onShow: function () {

    //animation 简介
    var animationMagicTopic = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 1000,
      timingFunction: "ease",
      delay: 0
    })

    this.animationMagicTopic = animationMagicTopic 
    this.setData({
      animationMagicTopic: animationMagicTopic.export()
    })

    //animation MagicContent 内容
    var animationMagicContent = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 1000,
      timingFunction: "ease",
      delay: 0
    })

    this.animationMagicContent = animationMagicContent
    this.setData({
      animationMagicContent: animationMagicContent.export(),
    })

  },

  //lock Magic
  lockMagic:function(event){

    var currentThemeId = '';
    var thisList = this.data.list;
    var that = this;

    if (thisList.colorScheme) {
      currentThemeId = thisList.colorScheme.themeId;
    }
  
    this.setData({ 
      isLoading:true
    })

    //api requeset divination
    apiFun.getDivinationList(
      {
        userId: 1,
        currentThemeId: currentThemeId,
        
        success: function (res) {

          //set view content 
          res.list.divinationShowContent = res.list.divinationContent;

          //set first tarbar bg color and font color
          if (res.list != false) {
            var firstBgColor = res.list['colorScheme']['navBgColor'];
            var firstFrontColor = res.list['colorScheme']['navFontColor'];
            console.log(firstFrontColor);
            wx.setNavigationBarColor({
              frontColor: firstFrontColor,
              backgroundColor: firstBgColor,
              animation: {
                duration: 400,
                timingFunc: 'easeIn'
              }
            })
          } 

          that.setData({
            list: res.list,
            loadingMagic: false,
            isLoading:false
          })

        },
        
        fail:function(res){
          return false;
        }
      }
    )


    //问题滑动
    var systemInfo = wx.getSystemInfoSync();
    this.animationMagicTopic.translateY(-780 / 750 * systemInfo.windowWidth).step();
    this.setData({
      animationMagicTopic: this.animationMagicTopic.export(),
    })
    
    //答案滑动
    this.animationMagicContent.translateY(- 700 / 750 * systemInfo.windowWidth).step();
    this.setData({
      animationMagicContent:this.animationMagicContent.export()
    })

    this.setData({
      isShowAnswerMagic: false
    })

  },

  //lock Magic
  closeAnswerMagic: function (event) {

    var systemInfo = wx.getSystemInfoSync();
    this.animationMagicTopic.translateY(10 / 750 * systemInfo.windowWidth).step();

    this.setData({
      animationMagicTopic: this.animationMagicTopic.export(),
    })

    //旧的上去
    this.animationMagicContent.translateY(670 / 750 * systemInfo.windowWidth).step();
    this.setData({
      animationMagicContent: this.animationMagicContent.export()
    })

    this.setData({
      isShowAnswerMagic: true
    })

  },

  //request answer magic
  eventAnswerMagic:function(event){

    var that = this;

    var dataset = event.currentTarget.dataset;
    var magicId = dataset.magicId;
    var indexId = dataset.indexId;
    var currentThemeId = dataset.currentThemeId;
    var currentContentId = dataset.currentContentId;
  
    var changeMagicList = this.data.list;

    that.setData({
      loadingMagic: true,
      isMagicLoading:true
    })

    apiFun.questionMagic(
      {
        success: function (res) {

          changeMagicList[indexId]['magicContent'] = res.magicContent;
          changeMagicList[indexId]['magicContentId'] = res.magicContentId;
          changeMagicList[indexId]['magicTitle']   = changeMagicList[indexId]['title'];
          changeMagicList[indexId]['isShowOneytitle'] = true;
          changeMagicList[indexId]['colorScheme'] = res.colorScheme;

          that.setData({
            list: changeMagicList,
            loadingMagic: false,
            isMagicLoading: false
          })

          //设置bar颜色
          var firstBgColor = res.colorScheme.navBgColor;
          var firstFrontColor = res.colorScheme.navFontColor;
          wx.setNavigationBarColor({
            frontColor: firstFrontColor,
            backgroundColor: firstBgColor,
            animation: {
              duration: 400,
              timingFunc: 'easeIn'
            }
          })

        },
        magicId: magicId,
        userId:2,
        currentThemeId: currentThemeId,
        currentContentId: currentContentId
      },

    )

  },

  eventChangeMagicContent:function(event){

    var that = this;

    // 当前位置
    var current = event.detail.current;

    //var magicInfo = this.data.magicList[current];

    //如果滑动到最后，需要加载新的数据
    if ((current + 1) % 10 == 0) {
      if (this.data.magicPage.pageSize != '') {
        if (this.data.magicPage.pageNumber < this.data.magicPage.pageTotalNumber) {

          var nextPageNumber = this.data.magicPage.pageNumber + 1;

          //追加列表
          api.getMagicList(
            {
              success: function (res) {
                that.setData({
                  list: that.data.magicList.concat(res.list),
                  page: res.page
                })
              },
              pageNumber: nextPageNumber,
              userId: 2
            },
          )
        }
      }
      //console.log('load more data');
    }


    /*设置bar上的颜色*/
    wx.setNavigationBarColor({
      frontColor: this.data.list[current]['colorScheme']['navFontColor'],
      backgroundColor: this.data.list[current]['colorScheme']['navBgColor'],
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  }

})